<template>
  <div class="container">
    <div class="app-container">
      <div class="cards">
        <div class="task">
          <div class="title">
            <span class="sub-title common">日销售统计</span>
          </div>
          <div class="content">
            <div class="total item">
              <span class="num">{{ dayOrderCount }}</span
              ><span class="mini-title">当日销售量（个）</span>
            </div>
            <div class="done item">
              <span class="num">{{ dayIncome }}</span
              ><span class="mini-title">当日销售额（元）</span>
            </div>
            <div class="pending item">
              <span class="num">{{ dayBill }}</span
              ><span class="mini-title">当日分成（元）</span>
            </div>
          </div>
        </div>
        <div class="sales">
          <div class="title">
            <span class="sub-title common">月销售统计</span>
          </div>
          <div class="content">
            <div class="order item">
              <span class="num">{{ monthOrderCount }}</span>
              <span class="mini-title">当月销售量（个）</span>
            </div>
            <div class="price item">
              <span class="num">{{ monthIncome }}</span
              ><span class="mini-title">当月销售额（元）</span>
            </div>
            <div class="price item">
              <span class="num">{{ monthBill }}</span
              ><span class="mini-title">当月分成（元）</span>
            </div>
          </div>
        </div>
      </div>
      <div class="list" v-loading="loading">
        <div class="search">
          <el-form class="search-form">
            <el-form-item label="合作商：" label-width="70px">
              <el-select
                style="width: 85%"
                v-model="pageParams.partnerId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in partnerList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="日期：" label-width="90px">
              <el-date-picker
                v-model="date"
                style="width: 350px"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button
                class="search-btn"
                size="mini"
                type="primary"
                icon="el-icon-search"
                @click="searchFn"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="status">
          <div class="count">笔数统计：<span class="num">{{ statusCount }}</span> 个</div>
          <div class="amount">收入统计：<span class="num">{{ statusIncome / 100 }}</span> 元</div>
          <div class="ratio">分成统计：<span class="num">{{ statusBill / 100 }}</span> 元</div>
        </div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="订单日期"> </el-table-column>
          <el-table-column prop="ownerName" label="合作商"> </el-table-column>
          <el-table-column label="分成比例">
            <template v-slot="{ row }">{{ row.ratio }}%</template>
          </el-table-column>
          <el-table-column label="收入（元）">
            <template v-slot="{ row }">{{ row.orderTotalMoney / 100 }}</template>
             </el-table-column>
          <el-table-column prop="orderCount" label="笔数"> </el-table-column>
          <el-table-column label="分成金额（元）">
            <template v-slot="{ row }">{{ row.totalBill / 100 }}</template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="space-between" style="margin-top: 20px">
          <span class="pageCount"
            >共{{ pageParams.totalCount }}条记录 第{{ pageParams.pageIndex }}/{{
              pageParams.totalPage
            }}页</span
          >
          <el-pagination
            layout="slot"
            :current-page.sync="pageParams.pageIndex"
            :page-size="pageParams.pagesize"
            :total="pageParams.totalPage"
          >
            <el-button
              type="primary"
              :disabled="pageParams.pageIndex === 1 ? true : false"
              class="pagi-btn"
              :class="{ disabled: pageParams.pageIndex === 1 }"
              @click="goPrev"
              >上一页</el-button
            >
            <el-button
              type="primary"
              :disabled="
                pageParams.pageIndex === pageParams.totalPage ? true : false
              "
              :class="{
                disabled: pageParams.pageIndex === pageParams.totalPage,
              }"
              class="pagi-btn"
              @click="goNext"
              >下一页</el-button
            >
          </el-pagination>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { getOrderCountApi, getIncomeApi, getBillApi, getStatusIncomeApi, getStatusCountApi, getStatusBillApi, getPartnerBillApi } from "@/api/home";
import { searchPartnerApi } from "@/api/node";
import { todayRangeApiSecF, dateRangeApiSecF, dateRangeApi } from "@/utils/time";

import moment from "moment";
export default {
  data() {
    return {
      tableData: [],
      partnerList:[],
      loading: true,
      date: [dateRangeApi.start, dateRangeApi.end],
      dayOrderCount: 0,
      monthOrderCount: 0,
      statusCount:0,
      dayIncome: 0,
      monthIncome: 0,
      statusIncome: 0,
      dayBill: 0,
      monthBill: 0,
      statusBill: 0,
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
        partnerId: "",
        start: dateRangeApi.start,
        end: dateRangeApi.end,
      },
    };
  },
  created() {
    this.getPartnerList();
    this.searchPartner();
    this.getOrderCount();
    this.getIncome();
    this.getBill();
  },
  methods: {
    // 搜索
    async searchPartner() {
      const res = await getPartnerBillApi({
        ...this.pageParams,
      });
      this.tableData = [...res.currentPageRecords];
      this.loading = false
      this.pageParams.pageIndex = +res.pageIndex;
      this.pageParams.pageSize = +res.pageSize;
      this.pageParams.totalPage = +res.totalPage;
      this.pageParams.totalCount = +res.totalCount;
    },
    async getPartnerList(){
      const res = await searchPartnerApi({
        ...this.pageParams,
      });
      this.partnerList = [...res.currentPageRecords];
    },
    async getOrderCount() {
      this.dayOrderCount = await getOrderCountApi(
        todayRangeApiSecF.start,
        todayRangeApiSecF.end
      );
      this.monthOrderCount = await getOrderCountApi(
        dateRangeApiSecF.start,
        dateRangeApiSecF.end
      );
      this.statusCount = this.monthOrderCount
    },
    async getIncome() {
      this.dayIncome = await getIncomeApi(
        todayRangeApiSecF.start,
        todayRangeApiSecF.end
      );
      this.monthIncome = await getIncomeApi(
        dateRangeApiSecF.start,
        dateRangeApiSecF.end
      );
      this.statusIncome = this.monthIncome
    },

    async getBill() {
      this.dayBill = await getBillApi(
        todayRangeApiSecF.start,
        todayRangeApiSecF.end
      );
      this.monthBill = await getBillApi(
        dateRangeApiSecF.start,
        dateRangeApiSecF.end
      );
    },
    async searchFn(){
      this.loading = true
      this.statusCount = await getStatusCountApi({partnerId:this.pageParams.partnerId,start:this.pageParams.start,end:this.pageParams.end});
      this.statusIncome = await getStatusIncomeApi({partnerId:this.pageParams.partnerId,start:this.pageParams.start,end:this.pageParams.end});
      this.statusBill = await getStatusBillApi({partnerId:this.pageParams.partnerId,start:this.pageParams.start,end:this.pageParams.end});
      const start = moment(this.pageParams.start)
      this.pageParams.start = start.format("YYYY-MM-DD")
      const end = moment(this.pageParams.end)
      this.pageParams.end = end.format("YYYY-MM-DD")
      this.searchPartner()
      this.loading = false
    },  

    // 上一页
    goPrev() {
      this.pageParams.pageIndex--;
      this.searchPartner();
    },
    // 下一页
    goNext() {
      this.pageParams.pageIndex++;
      this.searchPartner();
    },
  },
  watch: {
    date(newVal) {
      const momentobj0 = moment(newVal[0]);
      const formatted0 = momentobj0.format("YYYY-MM-DD 00:00:00");
      const momentobj1 = moment(newVal[1]);
      const formatted1 = momentobj1.format("YYYY-MM-DD 23:59:59");
      this.pageParams.start = formatted0;
      this.pageParams.end = formatted1;
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #f8fafd;
  padding: 20px;
  .search {
    background-color: #fff;
    display: flex;
    height: 64px;
    align-items: center;
    padding-top: 23px;
    margin-bottom: 20px;
    .search-form {
      display: flex;
      align-items: center;
      .search-btn {
        background-color: #5f84ff;
        border: none;
        margin-left: 15px;
        font-size: 16px;
        height: 36px;
        width: 80px;
        text-align: center;
        padding: 0;
      }
    }
  }
  .status{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    div{
      margin-right: 40px;
      font-size: 14px;
      .num {
        font-size: 20px;
        color:#ff5757;
        font-weight: 700;
        margin: 0 6px;
      }
    }
  }
  .list {
    padding: 20px;
    background-color: #fff;

    .btns {
      margin-bottom: 15px;
    }
    .add-btn {
      width: 80px;
      text-align: center;
      padding: 12px 0px;
      background-color: #ff8035;
      border: none;
      font-size: 14px;
    }
    .setting-btn {
      border: none;
      background-color: #fbf4f0;
      color: #716762;
      width: 80px;
      text-align: center;
      padding: 12px 0px;
    }
    .pageCount {
      color: #dbdfe5;
      margin-left: 10px;
    }
  }
  .pagi-btn {
    background-color: #d5ddf8;
    color: #606266;
    width: 70px;
    height: 32px;
    text-align: center;
  }
  .disabled {
    background-color: #eceff8;
    color: #d2d7dd;
  }
  .del {
    color: #ff5a5a;
  }
}
.vmImage {
  width: 24px;
  height: 24px;
  border-radius: 12px;
}
.cards {
  display: flex;
}
.task {
  width: 50%;
  height: 166px;
  padding: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  background-color: #e9f3ff;
  background-image: url("../../assets/user/1.png"),
    url("../../assets/report/left.png");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, calc(100% - 12px) 100%;
  border-radius: 20px;
  .title {
    .sub-title {
      font-size: 16px;
      color: #333;
      font-weight: 700;
      margin-right: 10px;
    }
    .time {
      font-size: 13px;
      color: #999;
    }
  }
  .content {
    display: flex;
    justify-content: space-between;
    padding-left: 15px;
    .item {
      width: 112px;
      height: 107px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .num {
        height: 50px;
        font-size: 36px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        line-height: 50px;
        color: #072074;
        text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
      }
      .mini-title {
        height: 17px;
        margin-top: 3px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #91a7dc;
        line-height: 17px;
      }
    }
  }
}
.sales {
  width: 48%;
  height: 166px;
  padding: 20px;
  background: #fbefe8 url("../../assets/report/right.png") no-repeat
    calc(100% - 12px) 100%;
  border-radius: 20px;
  .title {
    .sub-title {
      font-size: 16px;
      color: #333;
      font-weight: 700;
      margin-right: 10px;
    }
  }
  .content {
    display: flex;
    justify-content: space-around;
    padding-left: 15px;
    .item {
      width: 112px;
      height: 107px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .num {
        height: 50px;
        font-size: 36px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        line-height: 50px;
        color: #ff5757;
        text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
      }
      .mini-title {
        height: 17px;
        margin-top: 3px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #de9690;
        line-height: 17px;
      }
    }
  }
}
</style>
